<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <!-- you will need to import these css files when using the editor -->
    <!-- todo: add css to bundle, but currently this is not even useful, because browserify does not handle css -->
    <link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css"/>
    <link rel="stylesheet" href="../node_modules/codemirror/addon/hint/show-hint.css"/>
    <link rel="stylesheet" href="../node_modules/codemirror/addon/lint/lint.css"/>
</head>
<body>
<div id="custom_model_editor_box"></div>
<button id="toggle-button">show json</button>
<script type="module">
    // importing this module adds a global variable GHCustomModelEditor to,
    // it would be better to be able to use es6 imports, but since we are building
    // with webpack this is not possible at the moment: https://github.com/webpack/webpack/issues/2933
    import "../dist/index.js";
    const categories = {
        "max_speed": {type: 'numeric'},
        "max_weight": {type: 'numeric'},
        "max_height": {type: 'numeric'},
        "max_width": {type: 'numeric'},
        "road_class": {type: 'enum', values: ["OTHER", "MOTORWAY", "TRUNK", "PRIMARY", "SECONDARY", "TERTIARY", "RESIDENTIAL", "UNCLASSIFIED", "SERVICE", "ROAD", "TRACK", "BRIDLEWAY", "STEPS", "CYCLEWAY", "PATH", "LIVING_STREET", "FOOTWAY", "PEDESTRIAN", "PLATFORM", "CORRIDOR"].sort()},
        "road_class_link": {type: 'boolean'},
        "road_environment": {type: 'enum', values: ["OTHER", "ROAD", "FERRY", "TUNNEL", "BRIDGE", "FORD", "SHUTTLE_TRAIN"].sort()},
        "road_access": {type: 'enum', values: ["YES", "DESTINATION", "CUSTOMERS", "DELIVERY", "FORESTRY", "AGRICULTURAL", "PRIVATE", "OTHER", "NO"].sort()},
        "surface": {type: 'enum', values: ["MISSING", "PAVED", "ASPHALT", "CONCRETE", "PAVING_STONES", "COBBLESTONE", "UNPAVED", "COMPACTED", "FINE_GRAVEL", "GRAVEL", "GROUND", "DIRT", "GRASS", "SAND", "OTHER"].sort()},
        "toll": {type: 'enum', values: ["NO", "ALL", "HGV"].sort()}
    };
    const editor = GHCustomModelEditor.create({}, (element) => {
        document.querySelector("#custom_model_editor_box").appendChild(element);
    });
    editor.categories = categories;
    editor.setExtraKey('Ctrl-Enter', () => {editor.value = (editor.value + '\n ... hello')});
    editor.value = 'hello world';
    editor.cm.focus();
    editor.cm.setCursor(editor.cm.lineCount())
    const button = document.querySelector("#toggle-button")
    editor.validListener = (valid) => {
        button.disabled = !valid;
        if (valid)
            console.log(editor.jsonObj);
    }
    button.addEventListener("click", (e) => {
        editor.toggleJsonYAML();
        button.innerText = editor.yaml ? 'show json' : 'edit yaml';
    }, false);
</script>
</body>
</html>
